.z-btn-remove {
    color: $textColorButton;

    &:hover {
        color: $textColorDark;
    }
}

.btn {
	position: relative;
}
.btn > .z-icon {
	$_size: 18px;
    width: $_size;
    height: $_size;
    margin-top: calc(-#{$_size} / 2);
    line-height: $_size;
    vertical-align: bottom;
    text-align: center;
}

/* Give buttons that can wrap a bit of margin */
.buttons {
    .btn {
        margin-bottom: 4px;
    }
}

.btn {
    &.disabled {
        pointer-events: none;
        background: transparent;
        color: lighten($textColorLight, 5%);
        opacity: 1;

        .glyphicon {
            opacity: .6;
        }
    }
    .glyphicon {
        top: 3px;
    }
    &.btn-xs {
        .glyphicon {
            top: 2px;
        }
    }
    &.btn-sm {
        .glyphicon {
            top: 1px;
        }
    }
    &.btn-primary:hover {
        background-color: $brandPrimaryDark;
        border-color: darken($brandPrimaryDark, 5%);
    }
}

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #c0c0c0;
    border-color: #bbb;
}